<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 400px;
            margin: 50px auto;
            padding: 20px;
            border: 1px dashed #ccc;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: inline-block;
            width: 60px;
        }

        .btn-group button {
            margin-right: 10px;
        }

        .search-group {
            margin-top: 20px;
        }

        #result {
            margin-top: 10px;
        }

        #recordTable {
            margin-top: 20px;
            border-collapse: collapse;
        }

        #recordTable th,
        #recordTable td {
            border: 1px solid #000;
            padding: 5px;
        }
        /* .search-group{
            border-top: 1px solid black;
        } */
        hr{
            width: 440px;
            margin-left: -20px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" id="name">
        </div>
        <div class="form-group">
            <label for="phone">手机：</label>
            <input type="text" id="phone">
        </div>
        <div class="form-group">
            <label for="company">公司：</label>
            <input type="text" id="company">
        </div>
        <div class="btn-group">
            <button id="addRecord">新增记录</button>
            <button id="clearRecord">清除记录</button>
            <button id="showRecords">显示记录</button>
        </div>
        <hr>
        <div class="search-group">
            <label for="searchPhone">输入手机号：</label>
            <input type="text" id="searchPhone">
            <button id="searchOwner">查找机主</button>
        </div>
        <div id="result"></div>
        <table id="recordTable" style="display: none;">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>手机号</th>
                    <th>公司</th>
                </tr>
            </thead>
            <tbody id="tableBody"></tbody>
        </table>
    </div>

    <script>
        document.getElementById('addRecord').addEventListener('click', function () {
            const name = document.getElementById('name').value.trim();
            const phone = document.getElementById('phone').value.trim();
            const company = document.getElementById('company').value.trim();
            if (!name || !phone || !company) {
                alert('请填写完整信息（姓名、手机、公司）');
                return;
            }
            const userInfo = { name, company };
            localStorage.setItem(phone, JSON.stringify(userInfo));
            alert('记录新增成功');
            document.getElementById('name').value = '';
            document.getElementById('phone').value = '';
            document.getElementById('company').value = '';
        });
        document.getElementById('clearRecord').addEventListener('click', function () {
            localStorage.clear();
            alert('所有记录已清除');
            document.getElementById('recordTable').style.display = 'none';
            document.getElementById('tableBody').innerHTML = '';
        });
        document.getElementById('showRecords').addEventListener('click', function () {
            const tableBody = document.getElementById('tableBody');
            tableBody.innerHTML = '';
            for (let i = 0; i < localStorage.length; i++) {
                const phone = localStorage.key(i);
                const userInfo = JSON.parse(localStorage.getItem(phone));
                const row = tableBody.insertRow();
                const nameCell = row.insertCell(0);
                const phoneCell = row.insertCell(1);
                const companyCell = row.insertCell(2);
                nameCell.textContent = userInfo.name;
                phoneCell.textContent = phone;
                companyCell.textContent = userInfo.company;
            }
            document.getElementById('recordTable').style.display = 'table';
        });
        document.getElementById('searchOwner').addEventListener('click', function () {
            const searchPhone = document.getElementById('searchPhone').value.trim();
            if (!searchPhone) {
                alert('请输入要查找的手机号');
                return;
            }
            const userInfo = localStorage.getItem(searchPhone);
            const resultDiv = document.getElementById('result');
            if (userInfo) {
                const { name } = JSON.parse(userInfo);
                resultDiv.textContent = `${searchPhone}的机主是:${name}`;
            } else {
                resultDiv.textContent = `未找到${searchPhone}对应的机主信息`;
            }
        });
    </script>
</body>

</html>
